let nav = document.querySelector('.nav')

// 方案一  监听滚动事件
/* window.addEventListener('scroll',function(e){
  // console.log(this.scrollY,"这是");
  if(this.scrollY > nav.offsetHeight + 100){
    nav.classList.add('ceiling')
  }else{
    nav.classList.remove('ceiling')
  }
}) */

// 方案二 通过观察对象  监听文章列表是否在可视区域 来控制 导航栏的颜色切换
let io = new IntersectionObserver((entries, self)=>{
  console.log(entries,self);
  entries.forEach(item=>{
    if(item.isIntersecting){
      nav.classList.add('ceiling')
    }else{
      nav.classList.remove('ceiling')
    }
  })
})

let article_list = document.querySelector('.article')

io.observe(article_list)